<template>
	<a-menu :theme="$settingStore.oneXUI.themeMode" :mode="props.mode"  v-model:selectedKeys="$coreStore.activeKey.menus" @click="handleClick">
		<template v-for="subItem in $coreStore.menus" :key="subItem.key">
			<a-sub-menu v-if="subItem.children && subItem.children.length > 0" :key="subItem.key">
				<template #title><span>{{subItem.title}}</span></template>
				<template #icon>
					<XIcon :icon="subItem.icon" :color="$settingStore.iconColor" size="20" />
				</template>
				<a-menu-item v-for="item in subItem.children" :key="item.key">
					<template #icon>
						<XIcon :icon="item.icon" :color="$settingStore.iconColor" size="20" />
					</template>
					<span>{{item.title}}</span>
				</a-menu-item>
			</a-sub-menu>
			<a-menu-item v-else :key="subItem.key">
				<template #icon>
					<XIcon :icon="subItem.icon" :color="$settingStore.iconColor" size="20" />
				</template>
				<span>{{subItem.title}}</span>
			</a-menu-item>
		</template>
	</a-menu>
</template>

<script setup>
	
	import  XIcon  from '@/components/XIcon.vue';
	import {coreStore} from '@/stores/core';
	import {settingStore} from '@/stores/setting';
	
	const $settingStore = settingStore();
	const $coreStore = coreStore();	
	const props = defineProps({
		mode:{
			type:String,
			default:'inline',//vertical | horizontal | inline
		},
	});
	
	const handleClick = (item) => {
		//console.log('====>' + JSON.stringify(item));
		$coreStore.openPage(item.key);
		
	};
</script>

<style scoped>
</style>